/* pages/home/home.wxss */
@import "../../assets/css/theme.scss";
@import "../../assets/css/common.scss";
@import "../../assets/css/self-animate.scss";

.home-bg {
  min-height: 1624rpx;
  background-image: url("https://zsmatch.oss-cn-qingdao.aliyuncs.com/v3/20250318/home_bg.png");
  background-size: 100% 100%;
  @extend .main-root-bg;
}

// 中间部分
.home-content {
  // height: 100%;
  flex-direction: column;

  .icon-enter-rule,
  .icon-enter-prize {
    width: 81rpx;
    height: 179rpx;
  }
  .top-enter {
    margin-top: 170rpx;
    flex-direction: column;

    .btn-box {
      width: fit-content;
    }

    .enter-icon {
      margin-bottom: 21rpx;
      margin-left: 8rpx;
      width: 95rpx;
      height: 106rpx;
    }
  }

  .bottom-center {
    margin-top: 160rpx;
    justify-content: space-between;
  }
  .right-enter {
    margin-top: 570rpx;
  }
}

// footer
.home-footer {
  padding: 78rpx 8rpx;

  .footer-enter {
    flex-direction: column;
    align-items: center;

    .btn-start {
      width: 394rpx;
      height: 214rpx;
      margin-bottom: 23rpx;
    }

    .btn-group {
      .btn-pk {
        width: 325rpx;
        height: 171rpx;
      }

      .btn-prize {
        @extend .btn-pk;
        margin-left: 30rpx;
      }
    }
  }
  .icon-double {
    position: absolute;
    top: -60rpx;
    left: 30rpx;
    width: 200rpx;
    height: 80rpx;
  }
}

// auth-view
.auth-view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  button {
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
}
.auth-phone {
  background: transparent;
  padding: 0;
}

// 邀请对战弹窗
.fre_box {
  background-color: var(--overlay-background-color, rgba(0, 0, 0, 0.7));
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.fre_back {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}
.fre_img {
  width: 501rpx;
  height: 394rpx;
}
.fre_close_img {
  width: 38rpx;
  height: 38rpx;
  margin-top: 50rpx;
}
.fre_text {
  position: absolute;
  font-size: 28rpx;
  color: white;
  line-height: 1.8;
  text-align: center;
  width: 350rpx;
}
.fre_text_close {
  margin-top: 62rpx;
}
.fre_view {
  position: relative;
  margin-top: 50rpx;
}

// 手机号授权
.sq_phone_box_box {
  background-color: var(--overlay-background-color, rgba(0, 0, 0, 0.3));
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
}
.sq_phone_box {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: absolute;
  bottom: 50rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  width: 590rpx;
}
.sq_phone_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 60rpx 0 60rpx;
}
.sq_phone_btn_1 {
  width: 176rpx !important;
  height: 80rpx !important;
  text-align: center;
  color: #333;
  border-radius: 8rpx;
  border: 2rpx solid #666;
  line-height: 76rpx;
  font-size: 32rpx;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.sq_phone_btn_2 {
  color: #fff;
  background: #4AAAF8 !important;
  border: 2rpx solid #4AAAF8 !important;
}
.sq_phone_name {
  font-size: 32rpx;
  color: #333333;
  line-height: 46rpx;
}
.mend_box_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mend_box {
  height: 200rpx;
  background: #fff;
  width: 80%;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mend_text {
  color: red;
  text-align: center;
  font-weight: bold;
}